<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/media/plugin/h-ui/css/H-ui.min.css"/>
<link rel="stylesheet" type="text/css"
      href="<%=request.getContextPath()%>/media/plugin/Hui-iconfont/1.0.8/iconfont.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/media/css/common.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/media/plugin/pifu/pifu.css"/>
<script type="application/x-javascript"> addEventListener("load", function () {
    setTimeout(hideURLbar, 0);
}, false);

function hideURLbar() {
    window.scrollTo(0, 1);
}

function showSide() {
    $('.navbar-nav').toggle();
}</script>
<script type="text/javascript"
        src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101450291" charset="utf-8"
        data-callback="true"></script>

<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container cl">
            <a class="navbar-logo hidden-xs" href="index.html">
                <img class="logo" src="<%=request.getContextPath()%>/media/img/logoc.png" alt="Lao王博客"/>
            </a>
            <a class="logo navbar-logo-m visible-xs" href="index.html">Lao王博客</a>
            <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:void(0);"
               onclick="showSide();">&#xe667;</a>
            <nav class="nav navbar-nav nav-collapse w_menu" role="navigation">
                <ul class="cl">
                    <li class="active"><a href="index.html" data-hover="首页">首页</a></li>
                    <li><a href="mood.html" data-hover="学无止境">学无止境</a></li>
                    <li><a href="<%=request.getContextPath()%>/mood/page.html" data-hover="碎言碎语">碎言碎语</a></li>
                    <li><a href="<%=request.getContextPath()%>/diary/page.html" data-hover="心情日记">心情日记</a></li>
                    <li><a href="<%=request.getContextPath()%>/message/list.html" data-hover="留言板">留言板</a></li>
                    <li><a href="<%=request.getContextPath()%>/photo/show.html" data-hover="我的相册">我的相册</a></li>
                </ul>
            </nav>
            <nav class="navbar-nav navbar-userbar hidden-xs hidden-sm " style="top: 0;">
                <ul class="cl">
                    <li class="userInfo dropDown dropDown_hover">
                        <span id="qqLoginBtn">
                            <c:if test="${not empty sessionScope.SESSION_USER}">
                                <span><img src="${sessionScope.SESSION_USER.avatar}" class=""/></span>
                                <span>${sessionScope.SESSION_USER.nickname}</span>
                                <span><a href="javascript:logout();">退出</a></span>
                            </c:if>
                        </span>
                        <script type="text/javascript">
                           function logout(){
                               $.ajax({
                                   url:"<%=request.getContextPath()%>/user/logout.html",
                                   method: "post",
                                   success: function (data) {
                                       if (data.status) {
                                           $("#qqLoginBtn").html("")
                                           QC.Login.signOut();
                                           login()
                                       }
                                   }
                               })
                           }
                           function login(){
                               QC.Login({
                                       //btnId：插入按钮的节点id，必选
                                       btnId: "qqLoginBtn"
                                   }, function (reqData, opts) {//登录成功
                                       QC.Login.getMe(function (openId, accessToken) {
                                           $.ajax({
                                               url: "<%=request.getContextPath()%>/user/login.html",
                                               data: "userName=" + openId + "&nickname=" + QC.String.escHTML(reqData.nickname) + "&avatar=" + reqData.figureurl,
                                               method: "post",
                                               success: function (data) {
                                                   if (data.status) {
                                                       //根据返回数据，更换按钮显示状态方法
                                                       var dom = document.getElementById(opts['btnId']),
                                                           _logoutTemplate = [
                                                               //头像
                                                               '<span><img src="{figureurl}" class="{size_key}"/></span>',
                                                               //昵称
                                                               '<span>{nickname}</span>',
                                                               //退出
                                                               '<span><a href="javascript:logout();">退出</a></span>'
                                                           ].join("");
                                                       dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
                                                           nickname: QC.String.escHTML(reqData.nickname), //做xss过滤
                                                           figureurl: reqData.figureurl
                                                       }));
                                                   } else {
                                                       alert(data.message)
                                                   }
                                               }
                                           })
                                       })
                                   }
                               );
                           }
                        </script>
                        <c:if test="${empty sessionScope.SESSION_USER}">
                            <script type="text/javascript">
                                login()
                            </script>
                        </c:if>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
